﻿@using Model.WXshopBuiness;
@using Xproject.Util;
@using Model.Admin;
@using Model.Util;
@{
    Layout = "~/Views/Shared/_ShopLayout.cshtml";
    string Domain = CommonHelper.GetAppSettings("Domain");
    List<WXProduct> tuijianProducts = (List<WXProduct>)ViewData["TUIJIAN"];
    List<Advertisement> ads = new List<Advertisement>();
    List<IndexCategory> indexcategory = new List<IndexCategory>();
    if ((List<IndexCategory>)ViewData["IndexCategory"] != null)
    {
        indexcategory = (List<IndexCategory>)ViewData["IndexCategory"];
    }
    int adscount = 1;

    if ((List<Advertisement>)ViewData["ads"] != null)
    {
        ads = (List<Advertisement>)ViewData["ads"];
        adscount = ads.Count;
    }
    ViewBag.Title = "康道优选商城";
} 
   
 
    <style>
        .item img {
            width: 100%;
            height: 180px;
        }

        .carousel-inner > .item > a > img {
            display: block;
            max-width: 100%;
            line-height: 1;
        }
        .textover {
           
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size:1.6rem;
        }
        .divmoney {
            color: #fe6e12;
            font-size: 1.457em;
            display: block;
            font-family: '微软雅黑';
            float: left;
        }

        .divqisong {
            display: block;
            margin-top: 1rem;
            margin-left: 7rem;
            font-size: 0.857em;
        }

        .bianjie {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }


.neir_beij {
width: 100%;
background:White;
margin-top:1rem;
margin-bottom:1rem;
}

.neir_beij ul {
overflow: hidden;
margin: 0.2rem 0;
}

.neir_beij ul li {
width: 25%;
float: left;
text-align: center;
margin-bottom: .2rem;
list-style-type: none;
margin-top: 0.4rem;
}

.neir_beij ul li .daohangk {
position: relative;
margin: 0 auto 0.1rem;
text-align: center;
}

.neir_beij ul li .daohangk img {
width: 3.95rem;
height: 3.95rem;
}

.neir_beij ul li p {
font-size: 1.6rem;
color: #5f5f5f;
}
        #scrollera {
            position: absolute;
            z-index: 1;
            /* -webkit-touch-callout: none; */
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            padding: 0;
        }
    </style>

 


    <div id="wrapper" style="top:5px">
        <div id="scrollera">
            <div id="pullDown">
                <span class="pullDownIcon"></span>
                <span class="pullDownLabel">下拉刷新...</span>
            </div>


            <!--banner-->
            <div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    @for (int i = 0; i < adscount; i++)
                    {
                        string ac = i == 0 ? "active" : "";
                        <li data-target="#carousel-example-generic" data-slide-to="@i" class="@ac" style="padding:0 0px;height:4px;"></li>
                    }
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    @for (int i = 0; i < ads.Count; i++)
                    {
                        string ac = i == 0 ? "active" : "";
                        <div class="item @ac">
                            <a href="@ads[i].AdLink">
                                <img class="img-responsive big" style="height:180px" src="@(ads[i].AdDomain+ads[i].AdPicUrl)">
                            </a>
                        </div>
                    }
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

            <div class="neir_beij">
                <ul>
                    <li><a href="#" onclick="NothingTip('活动暂未开始')"><div class="daohangk"><img src="~/Content/Image/shop/c2.png"></div><p>团购专区</p></a></li>
                    <li><a href="#" onclick="NothingTip('积分商城暂未开放，敬请期待~')"><div class="daohangk"><img src="~/Content/Image/shop/c3.png"></div><p>积分商城</p></a></li>
                    <li><a href="#" onclick="NothingTip('本地生活暂未开放，敬请期待~')"><div class="daohangk"><img src="~/Content/Image/shop/c3.png"></div><p>本地生活</p></a></li>
                    <li><a href="~/UserCenter/UserCenter"><div class="daohangk"><img src="~/Content/Image/shop/c8.png"></div><p>个人中心</p></a></li>
                    @foreach (IndexCategory ic in indexcategory)
                    {
                        <li><a href="@(ic.IndexCateUrl)"><div class="daohangk"><img src="@(ic.Domain+ic.IconImg)"></div><p>@(ic.IndexCateShowName)</p></a></li>
                    }             
                </ul>
            </div>
            <!--hot-->
            @if(tuijianProducts!=null&& tuijianProducts.Count >= 3) { 
            <div class="hot">
                <div class="container">
                    <div class="title">
                        <hr>
                        <h4>热卖推荐</h4>
                        <hr>
                    </div>

                    <div class="row">
                        <div class="col-xs-5">
                            <a href="~/shop/ProductDetail?productId=@tuijianProducts[0].ProductID" class="sp">
                                <img src="@(tuijianProducts[0].Domain+tuijianProducts[0].ThumbnailUrl1)">
                                <p>@(tuijianProducts[0].ProductName)</p>
                                <span>￥<em>@(tuijianProducts[0].SalePrice.ToString("#0.00"))</em></span>
                            </a>
                        </div>
                        <div class="col-xs-7">
                            <div class="sp_1">
                                <a href="~/shop/ProductDetail?productId=@tuijianProducts[1].ProductID">
                                    <img src="@(tuijianProducts[1].Domain+tuijianProducts[1].ThumbnailUrl1)">
                                    <div>
                                        <p>@(tuijianProducts[1].ProductName)</p>
                                        <span>￥<em>@(tuijianProducts[1].SalePrice.ToString("#0.00"))</em></span>
                                    </div>
                                </a>
                            </div>
                            <div class="sp_1" style="margin-top:1em; border-bottom:none;">
                                <a href="~/shop/ProductDetail?productId=@tuijianProducts[2].ProductID">
                                    <img src="@(tuijianProducts[2].Domain+tuijianProducts[2].ThumbnailUrl1)">
                                    <div>
                                        <p>@(tuijianProducts[2].ProductName)</p>
                                        <span>￥<em>@(tuijianProducts[2].SalePrice.ToString("#0.00"))</em></span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            }
            <div class="product " id="thelist" style="margin-bottom:0px">
            </div>
            <div id="pullUp">
                <span class="pullUpIcon"></span>
                <span class="pullUpLabel">上拉加载更多...</span>
            </div>
        </div>
    </div>
      
    <script type="text/javascript">
        (function ($) {
            var myScroll,
                pullDownEl,
                pullDownOffset,
                pullUpEl,
                pullUpOffset;

            //todo 自己定义的变量
            var userDataSum,//存储数据的变量
                addNum = 0,
                stepLength = 7,//每次加载的步长
                ajaxIndex = 1,
                sumL = 0;//数据的长度
            /**
             *  刷新滚动区域的滚动条的位置（此方法在添加数据后调用）
             **/
            function refreshScrollBar() {
                console.log("刷新滚动条");
                setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
                    myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
            }

            function pullDownAction() {
                console.log("下拉");

                setTimeout(function () {
                    (function reloadPage() {
                        if (GetQueryString("_rf")) {
                            window.location.href = window.location.href.replace(GetQueryString("_rf"), Math.random());
                        } else {
                            window.location.href = window.location.href + (window.location.href.indexOf("?") > -1 ? "&" : "?") + "_rf=" + Math.random();
                        }
                    })();
                    myScroll.refresh();
                    console.log($("#product").height())
                }, 1000);
            }
            //初始化数据
            function pullUpAction() {
                console.log("上拉");

                setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!

                    getData(ajaxIndex, stepLength);
                    myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
            }

            function loaded() {
                pullDownEl = document.getElementById('pullDown');
                pullDownOffset = pullDownEl.offsetHeight;
                pullUpEl = document.getElementById('pullUp');
                pullUpOffset = pullUpEl.offsetHeight;
                myScroll = new iScroll('wrapper', {
                    useTransition: true,
                    topOffset: pullDownOffset,
                    onRefresh: function () {
                        if (pullDownEl.className.match('loading')) {
                            pullDownEl.className = '';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        } else if (pullUpEl.className.match('loading')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        }
                    },
                    onScrollMove: function () {
                        if (this.y > 5 && !pullDownEl.className.match('flip')) {
                            pullDownEl.className = 'flip';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                            this.minScrollY = 0;
                        } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                            pullDownEl.className = '';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                            this.minScrollY = -pullDownOffset;
                        } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'flip';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                            this.maxScrollY = this.maxScrollY;
                        } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                            this.maxScrollY = pullUpOffset;
                        }
                    },
                    onScrollEnd: function () {
                        if (pullDownEl.className.match('flip')) {
                            pullDownEl.className = 'loading';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';

                            refreshScrollBar();
                            pullDownAction();	// Execute custom function (ajax call?)
                        } else if (pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'loading';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                            if (userDataSum!=0 ) {
                                pullUpAction();	// Execute custom function (ajax call?)

                            } else {
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = "数据已全部加载完毕！";
                            }
                        }
                    }
                });

                setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
            }

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                return (r != null && r.length >= 2) ? decodeURI(r[2]) : null;
            }

            getData(ajaxIndex, stepLength);

            function getData(index, pagesize) {
                var type = $("#hiddenType").val();
                $.ajax({
                    type: "get",
                    url: "@(Domain + "/Shop/GetIndexProductList")" + "?index=" + index + "&pagesize="+pagesize,
                    dataType: "json",
                    success: function (data) {
                        userDataSum = data.Data.length;
                        var datas = "";
                        if (userDataSum != 0) {
                            ajaxIndex++;
                        }
                            for (var i = 0; i < data.Data.length; i++) {
                                datas = datas + BuildDIViitem(data.Data[i]);
                        }

                            $("#thelist").append(datas);
                    }
                })
            }




            function BuildDIViitem(data) {
                var div =  '<div class="sp_pr">'+
                '<a href="@(Domain)/shop/ProductDetail?productId='+data.ProductID+'">'+
                    '<img src="'+data.Domain+data.ThumbnailUrl1+'">'+
                    '<div style="width: 100%;">'+
                    '<p class="textover">' + data.ProductName + '</p>' +
                    '<p class="textover">' + data.AllSpec + '</p>' +
                        '<div class="xing">'+
                            '<span class="glyphicon glyphicon-star"></span>'+
                            '<span class="glyphicon glyphicon-star"></span>'+
                            '<span class="glyphicon glyphicon-star"></span>'+
                            '<span class="glyphicon glyphicon-star"></span>'+
                            '<span class="glyphicon glyphicon-star"></span>'+
                            '<span>月销量<em>'+data.SaleCounts+'</em>件</span>'+
                        '</div>'+
                        '<div style="height:2rem;" class="xing">'+
                            '<span class="divmoney">￥<em>'+data.SalePriceStr+'</em></span>'+

                        '</div>'+
                    '</div>'+
                '</a>'+
            '</div>';
                return div;
            }
    })(jQuery);

        function NothingTip(msg) {
            layer.open({
                content: msg
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
            });
        }

    </script>


</body>
</html>
